<!-- 楼栋详情 -->
<template>
	<view class="home-container">
		<view class="building">
			<view class="label">
				楼栋
			</view>
			<view class="list">
				<view :class="[currentDataBuild == index ? 'active':'value']" v-for="(item, index) in buildList"
					:key="index">
					<text :data-current="index" @click="changeBuildTab(index, item.id)">{{item.floorName}}</text>
				</view>
			</view>
		</view>
		<view class="cell">
			<view class="label">
				单元
			</view>
			<view class="list">
				<view :class="[currentDataCell == index ? 'active':'value']" v-for="(item, index) in infoList"
					:key="index">
					<text :data-current="index" @click="changeCellTab(index, item)">{{item.unit}}</text>
				</view>
			</view>
		</view>
		<u-gap height="6" bgColor="#F7F7F7"></u-gap>
		<view class="stateList">
			<view class="item">
				<text></text>
				<text>可销售</text>
			</view>
			<view class="item">
				<text></text>
				<text>已认筹</text>
			</view>
			<view class="item">
				<text></text>
				<text>已认购</text>
			</view>
			<view class="item">
				<text></text>
				<text>已签约</text>
			</view>
			<view class="item">
				<text></text>
				<text>已成交</text>
			</view>
			<view class="item">
				<text></text>
				<text>已销控</text>
			</view>
		</view>
		<u-gap height="6" bgColor="#F7F7F7"></u-gap>
		<view class="title">
			<text>楼层</text>
			<text>{{currentDataCell + 1}}单元</text>
		</view>
		<u-gap height="6" bgColor="#F7F7F7"></u-gap>
		<view class="box">
			<u-checkbox-group @change="checkboxChange">
				<view class="item" v-for="(item, index) in houseList" :key="index">
					<view class="step">{{index + 1}}</view>
					<view class="con">
						<view v-for="(val, i) in item" :key="i">
							<view class="house">
								<u-checkbox v-if="checkboxShow" v-model="val.checked" shape="circle"
									:name="val.id">
								</u-checkbox>
								<view
									:class="[val.saleStatus == 0 ? 'activeHouse0' : val.saleStatus == 1 ? 'activeHouse1': val.saleStatus == 2 ? 'activeHouse2': val.saleStatus == 3 ? 'activeHouse3': val.saleStatus == 4 ? 'activeHouse4': val.saleStatus == 5 ? 'activeHouse5' : '']">
								</view>
								<text>{{val.houseName}}</text>
								<text>{{val.houseArea}}{{ val.houseArea ? "m²" : "" }}</text>
								<text>{{val.houseType}}</text>
								<text>{{val.price}}</text>
								<text>{{val.totalPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="btns" v-if="optionBtnShow">
			<button @click="batchEdit">批量编辑</button>
			<button>完成</button>
		</view>
		<view class="editBtns" v-else>
			<view class="btnsInfo">
				<text @click="checkedAll()" style="margin-left: 15rpx;">全选</text>
				<text class="line">|</text>
				<text>已选</text>
				<text>{{checkLength}}</text>
				<text>个</text>
			</view>
			<view class="cancelEdit">
				<text @click="cancelEdit()">取消编辑</text>
				<button @click="next()">确定</button>
			</view>
		</view>
		<u-popup v-model="showPopup" mode="bottom" :closeable="true" @close="close">
			<view class="popupTitle">
				销售状态和价格设置
			</view>
			<view class="popupCon">
				<view class="ischecked">
					<text>已选择：</text>
					<text>{{isCheckedList.join(",")}}</text>
				</view>
				<view class="states">
					<view class="label">
						销售状态选择：
					</view>
					<view class="value">
						<text :class="[ currentDataColor == index ? 'active'+index:'' ]"
							v-for="(item, index) in stateList" :key="index" :data-current="index"
							@click="changeColorTab(index)">{{item.label}}</text>
					</view>
				</view>
				<u-form :model="form" ref="uForm">
					<view class="item">
						<text>单价：</text>
						<u-input type="digit" trim v-model="form.price" :border="false" inputAlign="right"
							placeholder="请填写"></u-input>
						<text style="margin-left: 10rpx;">元/m²</text>
					</view>
					<view class="item">
						<text>总价：</text>
						<u-input type="digit" trim v-model="form.totalPrice" :border="false" inputAlign="right"
							placeholder="请填写">
						</u-input>
						<text style="margin-left: 10rpx;">元</text>
					</view>
					<view class="item">
						<text>定金：</text>
						<u-input type="digit" trim v-model="form.deposit" name="deposit" :border="false"
							inputAlign="right" placeholder="请填写"></u-input>
						<text style="margin-left: 10rpx;">元</text>
					</view>
				</u-form>
				<button class="submit" @click="submit()">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		floorHouseUpdate,
		floorControllerSelectInfo,
		selectFloorAndUnit
	} from '@/unit/api.js';
	export default {
		data() {
			return {
				active: false, // radio选中状态
				currentDataBuild: 0,
				currentDataCell: 0,
				checkboxValue: [],
				checkboxShow: false, // 自定义checkbox
				optionBtnShow: true, // 操作按钮显示
				checkLength: 0, // 已选多少个
				checkedSingle: false,
				showPopup: false, // 弹出层
				currentDataColor: "", // 状态选择
				isCheckedList: [], // 已选择房间数
				isIdList: [], // 已选择房间数(用于提交)
				showSumit: false, // 提交登录框
				communityId: '', // 小区id
				loginContent: '请检查您的操作无误，请提交！',
				form: {
					deposit: '', // 定金
					price: '', // 单价
					totalPrice: '' // 总价
				},
				// 基本案列数据
				buildList: [], // 栋列表
				houseList: [], // 单元下面的房子数
				stateList: [{
						label: "已认筹",
						value: "1"
					}, {
						label: "已认筹",
						value: "2"
					},
					{
						label: "已认购",
						value: "3"
					},
					{
						label: "已签约",
						value: "4"
					},
					{
						label: "已成交",
						value: "5"
					},
					{
						label: "已销控",
						value: "6"
					}

				], // 状态值
				infoList: [], // 房间信息
			}
		},
		onLoad(option) {
			console.log("option", option)
			this.getFloorAndUnit(option.id);
			let _that = this
			setTimeout(function() {
				_that.changeBuildTab(0, uni.getStorageSync("id"));
			}, 100)
			setTimeout(function() {
				_that.changeCellTab(0, uni.getStorageSync("cellItem"));
			}, 500)
		},
		methods: {
			// 获取楼栋列表
			getFloorAndUnit(args) {
				let param = {
					communityId: args // 楼盘ID
				};

				selectFloorAndUnit(param).then(data => {
					this.buildList = data.data.object;
					uni.setStorageSync("id", data.data.object[0].id);
				});
			},
			// 栋数tab切换
			changeBuildTab(e, id) {
				this.infoList = []; // 清空原始数据
				this.houseList = []; // 清空原始数据
				this.currentDataBuild = e;
				this.currentDataCell = 0;

				floorControllerSelectInfo(id).then(data => {
					this.infoList = data.data.object.floorHouseBaseVO;
					uni.setStorageSync("cellItem", this.infoList[0]);
					this.changeCellTab(0, uni.getStorageSync("cellItem"))
				});
			},
			// 栋数tab切换
			changeCellTab(index, item) {
				this.houseList = []; // 清空原始数据
				this.currentDataCell = index;
				this.houseList = item.floorHouseEntityList;
			},
			// 批量编辑
			batchEdit() {
				this.checkboxShow = true;
				this.optionBtnShow = false;
			},
			// 取消编辑
			cancelEdit() {
				this.checkboxShow = false;
				this.optionBtnShow = true;
				this.houseList.map(item => {
					item.map(val => {
						return val.checked = false;
					})
				})
			},
			checkboxChange(n) {
				this.checkLength = n.length;
				this.isIdList = n;
				this.isIdList.map(item => {
					this.houseList.map(val => {
						val.filter(v => {
							if (v.id == item) {
								this.isCheckedList.push(v.houseName)
							}
						});
					});
				});
				this.isCheckedList = [...new Set(this.isCheckedList)]
			},
			// 全选
			checkedAll() {
				this.houseList.map(item => {
					item.map(val => {
						return val.checked = true;
					})
				})
				this.houseList = this.houseList;
				let newArr = this.houseList.reduce(function(pre, old) {
					return pre.concat(old)
				}, []);
				this.checkLength = newArr.length;
				this.isIdList = newArr.map(item => item.id);
				this.isCheckedList = newArr.map(item => item.houseName)
			},
			// 下一步
			next() {
				if (this.checkLength < 1) {
					uni.showToast({
						title: '至少选择一项',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					this.showPopup = true;
				}
			},
			changeColorTab(e) {
				this.currentDataColor = e;
			},
			close() {
				this.showPopup = false;
			},
			// 提交
			submit() {
				if (this.form.price == "") {
					uni.showToast({
						title: '单价必填',
						icon: "none",
						duration: 2000
					});
					return;
				}

				if (this.form.totalPrice == "") {
					uni.showToast({
						title: '总价必填',
						icon: "none",
						duration: 2000
					});
					return;
				}

				if (this.form.deposit == "") {
					uni.showToast({
						title: '定金必填',
						icon: "none",
						duration: 2000
					});
					return;
				}

				const param = {
					deposit: this.form.deposit, // 定金
					id: this.isIdList, // id集合
					price: this.form.price, // 单价
					saleStatus: this.currentDataColor, // 销售状态
					totalPrice: this.form.totalPrice // 总价
				};
				floorHouseUpdate(param).then(data => {
					this.showPopup = false;
					this.checkboxShow = false;
					this.optionBtnShow = true;
					this.changeBuildTab(0, uni.getStorageSync("id"));
					this.changeCellTab(0, uni.getStorageSync("cellItem"));
				});
			},
		}
	}
</script>

<style lang="scss">
	.activeHouse0 {
		width: 0;
		height: 0;
		border-top: 40rpx solid #B3B3B3;
		border-right: 40rpx solid transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	.activeHouse1 {
		width: 0;
		height: 0;
		border-top: 40rpx solid #3200FF;
		border-right: 40rpx solid transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	.activeHouse2 {
		width: 0;
		height: 0;
		border-top: 40rpx solid #A200FF;
		border-right: 40rpx solid transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	.activeHouse3 {
		width: 0;
		height: 0;
		border-top: 40rpx solid #00B31E;
		border-right: 40rpx solid transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	.activeHouse4 {
		width: 0;
		height: 0;
		border-top: 40rpx solid #FF0000;
		border-right: 40rpx solid transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	.activeHouse5 {
		width: 0;
		height: 0;
		border-top: 40rpx solid #5C5C5C;
		border-right: 40rpx solid transparent;
		position: absolute;
		top: 0;
		left: 0;
	}

	.building,
	.cell {
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: nowrap;

		.active {
			background: #EFFAFF;
			color: #333;
			font-size: 28rpx;
			width: 140rpx;
			float: left;
			margin-bottom: 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin-left: 10rpx;
			border: 1px solid #A0E8FF;
		}

		.label {
			width: 100rpx;
			font-size: 28rpx;
			text-align: center;
		}

		.list {
			width: calc(100% - 100rpx);
			display: flex;
			flex-wrap: wrap;

			.value {
				background: #F7F7F7;
				color: #333;
				font-size: 28rpx;
				width: 140rpx;
				float: left;
				margin-bottom: 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				margin-left: 10rpx;
				border: 1px solid #F7F7F7;
			}
		}
	}

	.stateList {
		margin: auto;
		margin-top: 25rpx;
		display: flex;
		margin-bottom: 25rpx;
		justify-content: space-around;
		width: 95%;

		.item {
			text {
				&:first-child {
					height: 24rpx;
					width: 24rpx;
					display: inline-block;
					vertical-align: middle;
					margin-right: 5rpx;
				}

				&:last-child {
					font-size: 28rpx;
				}
			}

			&:first-child {
				text {
					&:first-child {
						border: 1px solid #B3B3B3;
					}
				}
			}

			&:nth-child(2) {
				text {
					&:first-child {
						border: 1px solid #3200FF;
						background: #3200FF;
					}
				}
			}

			&:nth-child(3) {
				text {
					&:first-child {
						border: 1px solid #A200FF;
						background: #A200FF;
					}
				}
			}

			&:nth-child(4) {
				text {
					&:first-child {
						border: 1px solid #00B31E;
						background: #00B31E;
					}
				}
			}

			&:nth-child(5) {
				text {
					&:first-child {
						border: 1px solid #FF0000;
						background: #FF0000;
					}
				}
			}

			&:nth-child(6) {
				text {
					&:first-child {
						border: 1px solid #5C5C5C;
						background: #5C5C5C;
					}
				}
			}
		}
	}

	.title {
		width: 90%;
		margin: auto;
		display: flex;
		margin-top: 40rpx;

		text {
			height: 50rpx;
			line-height: 50rpx;
			display: inline-block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 30rpx;

			&:first-child {
				width: 80rpx;
			}

			&:last-child {
				width: calc(100% - 80rpx);
				background: #EFFAFF;
				text-align: center;
			}
		}
	}

	.box {
		width: 100%;
		overflow-x: scroll;
		margin-left: 20rpx;
		margin-top: 40rpx;

		.item {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;

			.clear {
				background: #F0F0F0;
			}

			&:first-child {
				.step {
					border-radius: 50rpx 50rpx 0 0;
				}
			}

			&:last-child {
				.step {
					border-radius: 0rpx 0rpx 50rpx 50rpx;
				}
			}

			.step {
				background: rgba(0, 0, 0, 0.2);
				width: 30rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 180rpx;
				color: #fff;
			}

			.con {
				display: flex;
				width: calc(100% - 30rpx);
				margin-top: 10rpx;
				margin-bottom: 10rpx;

				/deep/.u-checkbox {
					position: absolute;
					left: 0;
					right: 0;
					margin-left: auto;
					margin-right: auto;
					text-align: center;
					display: flex;
					justify-content: center;
					height: 100%;
					width: 100%;
					background: rgba(0, 0, 0, 0.2);
				}

				/deep/.u-checkbox__icon-wrap {
					margin-left: 0;
					margin-right: 0;
					text-align: center;
					margin: auto;
					position: absolute;
					display: flex;
					justify-content: center;
					border: 1px solid #2B85E4;
				}

				.house {
					border: 1px solid #DDDDDD;
					width: 180rpx;
					height: 180rpx;
					font-size: 24rpx;
					color: #666666;
					margin-left: 20rpx;
					text-align: center;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					position: relative;
					flex-shrink: 0;

					.activeHouse {
						width: 0;
						height: 0;
						border-top: 50px solid transparent;
						border-bottom: 50px solid transparent;
						border-left: 50px solid #ff7f50;
					}

					text {
						display: block;
						width: 100%;

						&:first-child {
							font-size: 28rpx;
							color: #000;
						}
					}

					.radioView {
						height: 100%;
						width: 100%;
						position: absolute;
						background: rgba(0, 0, 0, 0.2);
						left: -20rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}

	}

	.btns {
		margin: auto;
		margin-top: 50rpx;
		display: flex;
		margin-bottom: 50rpx;
		width: 90%;
		justify-content: space-between;
		display: flex;

		button {
			font-size: 32rpx;

			&:first-child {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				background: none;
				color: #1A9CEE;
				border: 1px solid #1A9CEE;
			}

			&:last-child {
				width: 45%;
				height: 82rpx;
				line-height: 82rpx;
				background: #1A9CEE;
				color: #fff;
			}
		}
	}

	.editBtns {
		margin: auto;
		margin-top: 50rpx;
		display: flex;
		margin-bottom: 50rpx;
		width: 90%;
		align-items: center;
		justify-content: space-between;

		.line {
			vertical-align: middle;
			color: #E4E4E4;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.btnsInfo {
			width: 40%;
			display: flex;
			font-size: 32rpx;
		}

		.cancelEdit {
			text-align: right;
			display: flex;

			text {
				color: #1A9CEE;
				height: 80rpx;
				line-height: 80rpx;
				display: inline-block;
				font-size: 32rpx;
			}

			button {
				background: #1A9CEE;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #fff;
				width: 140rpx;
				margin-left: 40rpx;
			}
		}
	}


	.popupTitle {
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #E4E4E4;
		width: 100%;
	}

	.popupCon {
		width: 95%;
		margin: auto;

		.ischecked {
			margin: auto;
			border-bottom: 1px solid #F9F9F9;
			font-size: 28rpx;
			width: 95%;
			margin-top: 40rpx;
			padding-bottom: 40rpx;
		}

		.states {
			margin: auto;
			border-bottom: 1px solid #F9F9F9;
			font-size: 28rpx;
			width: 95%;
			margin-top: 40rpx;
			padding-bottom: 40rpx;

			.active0 {
				background: #fff;
				border: 1px solid #D9D9D9 !important;
				color: #000;
			}

			.active1 {
				background: #3200FF;
				border: 1px solid #3200FF !important;
				color: #fff;
			}

			.active2 {
				background: #A200FF;
				border: 1px solid #A200FF !important;
				color: #fff;
			}

			.active3 {
				background: #00B31E;
				border: 1px solid #00B31E !important;
				color: #fff;
			}

			.active4 {
				background: #FF0000;
				border: 1px solid #FF0000 !important;
				color: #fff;
			}

			.active5 {
				background: #5C5C5C;
				border: 1px solid #5C5C5C !important;
				color: #fff;
			}

			.value {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				text {
					width: 200rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
					display: inline-block;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 28rpx;
					border: 1px solid #D9D9D9;
					margin-top: 20rpx;
				}
			}
		}

		.item {
			margin: auto;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			width: 95%;
			border-bottom: 1px solid #F9F9F9;
			align-items: center;
			font-size: 28rpx;

			/deep/.u-input__content__field-wrapper__field {
				text-align: right !important;
				margin-right: 20rpx;
				font-size: 32rpx !important;
			}
		}

		.submit {
			background-image: linear-gradient(to right, #21A9FF, #199AEC) !important;
			height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			margin-bottom: 50rpx;
			margin-top: 40rpx;
			line-height: 90rpx;
		}
	}
</style>
